<template>
  <div id="app">
    <loading v-show="loading"></loading>

    <!-- 这里是需要keepalive的 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>

    <!-- 这里不会被keepalive -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>

  </div>
</template>

<script>
  export default {
    name: 'app',
    computed: {
      loading: function () {
        return this.$store.state.loading;
      }
    },
    watch: {
      $route(to, from) {
        // console.log(to.path, from.path) //测试跳转路径
        if (to.path == '/home/personalcenter') {
          this.$store.dispatch('personalHeaderBg');
          this.$store.dispatch('changeHeaderTitle', '个人中心');
          this.$store.dispatch('selectTabIndex', 'personalcenter');
        } else if (to.path == '/home/arsocial') {
          this.$store.dispatch('defaultHeaderBg')
          this.$store.dispatch('changeHeaderTitle', 'AR交友');
          this.$store.dispatch('selectTabIndex', 'arsocial');
        } else if (to.path == '/home/photowall') {
          this.$store.dispatch('defaultHeaderBg')
          this.$store.dispatch('changeHeaderTitle', '最美');
          this.$store.dispatch('selectTabIndex', 'photowall');
        }
      }
    },
  }

</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
  }
  
  html,
  body {
    height: 100%;
    /*高度铺满全屏，否则会高度包裹内容，不能达到全屏效果*/
    overflow: hidden;
    /* 用于禁止窗口滚动条 */
  }

</style>
